<!-- 选择想定弹窗 -->
<template>
    <div class="select-scenario-dialog">
        <el-dialog title="选择想定" :visible.sync="dialogVisible" width="85vw" @close="handleClose"
            :close-on-click-modal="false" :destroy-on-close="true">
            <div class="select-scenario flex flex-row">
                <div class="select-scenario-left-tree flex flex-col">
                    <div class="select-scenario-tree-title flex justify-center items-center" style="height: 32px">
                        想定列表
                    </div>
                    <div class="select-scenario-tree-box flex" style="height: calc(100% - 32px)">
                        <Tree ref="scenarioTreeRef" :isGeneralFolderAndFile="true" :treeData="treeData"
                            @nodeClick="nodeClick" @check="check" :showMenu="false" :showCheckbox="true"
                            :checkStrictly="false">
                        </Tree>
                    </div>
                </div>
                <div class="select-scenario-right-box flex flex-col">
                    <FolderDetail v-if="isFolder" ref="folderRef" :nodeInfo="selectedNodeInfo">
                    </FolderDetail>
                    <ScenarioDetail v-if="isFile" ref="scenarioDetailRef" :showButton="false"
                        :nodeInfo="selectedNodeInfo">
                    </ScenarioDetail>
                </div>
            </div>
            <span slot="footer" style="display: flex; margin-left: 35px;">
                <el-button class="jtyj-btn-cancel" @click="dialogVisible = false">取 消</el-button>
                <el-button class="jtyj-btn-primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { getScenarioTree } from "@/api/myspace/scenario-edit-tool/scenario-edit";
import Tree from "@/components/LeftTree/tree.vue";
import FolderDetail from "@/views/myspace/scenario-edit-tool/components/folder-detail.vue";
import ScenarioDetail from "@/views/myspace/scenario-edit-tool/components/scenario-detail.vue";
export default {
    name: "SelectScenarioDialog",
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            selectedNodeInfo: {}, // 当前选中节点的信息
            isFilterOpen: false,
            isFile: false,
            isFolder: false,
            checkedState: null // 当前树中节点的选中状态
        };
    },
    props: {
        experimentId: {
            type: Number,
            default: 0,
        },
    },
    components: {
        Tree,
        FolderDetail,
        ScenarioDetail
    },
    computed: {
    },
    created() {
    },
    methods: {
        init() {
            this.dialogVisible = true;
            this.getScenarioTree();
        },

        // 获取想定树数据
        getScenarioTree() {
            getScenarioTree().then((response) => {
                if (response.code == 200) {
                    this.treeData = response.data[0].commonTreeList;
                }
            });
        },

        // 点击节点
        nodeClick(node) {
            this.selectedNodeInfo = node;
            if (node.type == 0) {
                // 点击的文件夹
                this.isFolder = true;
                this.isFile = false;
            } else {
                // 点击的文件
                this.isFolder = false;
                this.isFile = true;
            }
        },

        // 树节点选中状态改变
        check(node, checkedState) {
            this.checkedState = checkedState;
        },

        handleClose(done) {
            this.dialogVisible = false;
        },

        // 提交
        submitForm() {
            // checkedKeys:[14, 42]
            console.log(this.checkedState);
            
            if (this.checkedState && this.checkedState.checkedKeys.length > 0) {
                // 执行提交操作
                this.dialogVisible = false;
                this.$emit('refresh');

            }else {
                this.$message.error('请选择想定');
            }
        },

    },
};
</script>

<style lang="scss" scoped>
.select-scenario-dialog {
    .select-scenario {
        width: 1630px;
        height: 700px;

        .select-scenario-left-tree {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--ui-border-color-split);
            box-sizing: border-box;
            width: 250px;
            padding-right: 10px;

            .select-scenario-tree-title {
                height: 35px;
                font-weight: var(--ui-font-weight-semibold);
                letter-spacing: 2px;
            }

            .select-scenario-tree-box {
                flex-grow: 1;
                overflow-y: auto;
            }
        }

        .select-scenario-right-box {
            width: calc(100% - 280px);
            height: 100%;
            padding: 0 50px;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>